M

MLOG

Čeština

Komplexní průvodce CSS časovými osami posouvání, novou výkonnou technikou webových animací, která propojuje animace přímo s pozicí posouvání. Naučte se, jak vytvářet poutavé a interaktivní uživatelské zážitky.

CSS Časová osa posouvání: Animace na základě pozice posouvání

Animace řízené posouváním (scroll-driven animations) přinášejí revoluci do webdesignu a nabízejí poutavé a interaktivní uživatelské zážitky, které překračují rámec tradičních statických layoutů. CSS časové osy posouvání (CSS Scroll Timelines) poskytují nativní řešení v prohlížeči pro vytváření těchto animací a přímo propojují průběh animace s pozicí posouvání prvku. To otevírá svět kreativních možností pro zvýšení zapojení uživatelů a vyprávění příběhů na webu.

Co jsou CSS časové osy posouvání?

CSS časové osy posouvání vám umožňují řídit průběh CSS animace nebo přechodu na základě pozice posouvání určeného kontejneru. Místo spoléhání se na tradiční časové animace, kde je doba trvání animace pevně daná, je průběh animace přímo vázán na to, jak daleko uživatel posunul stránku. To znamená, že animace se bude pozastavovat, přehrávat, přetáčet zpět nebo zrychlovat v přímé reakci na chování uživatele při posouvání, což vytváří přirozenější a interaktivnější zážitek. Představte si ukazatel průběhu, který se plní, jak posouváte stránku dolů, nebo prvky, které se postupně objevují a mizí, když vstupují do viewportu – to jsou efekty, kterých lze snadno dosáhnout pomocí CSS časových os posouvání.

Proč používat CSS časové osy posouvání?

Klíčové koncepty a vlastnosti

Pochopení základních konceptů a CSS vlastností je klíčové pro efektivní využití časových os posouvání:

1. Časová osa posouvání (Scroll Timeline)

Vlastnost scroll-timeline definuje kontejner posouvání, který bude použit jako časová osa pro animaci. Můžete specifikovat pojmenovanou časovou osu (např. --my-scroll-timeline) nebo použít předdefinované hodnoty jako auto (nejbližší předek s posuvníkem), none (žádná časová osa posouvání) nebo root (viewport dokumentu).

/* Definice pojmenované časové osy posouvání */
.scroll-container {
  scroll-timeline: --my-scroll-timeline;
}

/* Použití pojmenované časové osy v animaci */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

2. Animační časová osa (Animation Timeline)

Vlastnost animation-timeline přiřazuje animaci časovou osu posouvání. Tato vlastnost propojuje průběh animace s pozicí posouvání určeného kontejneru. Můžete také použít funkci view(), která vytváří časovou osu na základě toho, jak prvek protíná viewport.

/* Propojení animace s časovou osou posouvání */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

/* Použití view() pro animace založené na viewportu */
.animated-element {
  animation-timeline: view();
}

3. Posuny posouvání (Scroll Offsets)

Posuny posouvání definují počáteční a koncové body časové osy posouvání, které odpovídají začátku a konci animace. Tyto posuny vám umožňují přesně kontrolovat, kdy animace začne a skončí na základě pozice posouvání. Pro definici těchto posunů můžete použít klíčová slova jako cover, contain, entry, exit a číselné hodnoty (např. 100px, 50%).

/* Animace, když je prvek plně viditelný */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: entry 0% cover 100%;
}

/* Začátek animace 100px odshora, konec, když je spodní okraj 200px od spodního okraje viewportu */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: 100px exit 200px;
}

4. Osa časové osy posouvání (Scroll Timeline Axis)

Vlastnost scroll-timeline-axis specifikuje osu, podél které postupuje časová osa posouvání. Může být nastavena na block (vertikální posouvání), inline (horizontální posouvání), both (obě osy) nebo auto (určeno prohlížečem). Při použití view() je doporučeno osu explicitně specifikovat.

/* Definice osy časové osy posouvání */
.scroll-container {
  scroll-timeline-axis: y;
}

/* S view */
.animated-element {
  scroll-timeline-axis: block;
}

5. Rozsah animace (Animation Range)

Vlastnost `animation-range` definuje posuny posouvání (počáteční a koncové body), které odpovídají začátku (0 %) a konci (100 %) animace. To vám umožňuje mapovat specifické pozice posouvání na průběh animace.

/* Mapování celého rozsahu posouvání na animaci */
.animated-element {
  animation-range: entry 0% cover 100%;
}

/* Spuštění animace v polovině rozsahu posouvání */
.animated-element {
  animation-range: 50% 100%;
}

/* Použití hodnot v pixelech */
.animated-element {
  animation-range: 100px 500px;
}

Praktické příklady a případy použití

Pojďme se podívat na několik praktických příkladů, jak použít CSS časové osy posouvání k vytvoření poutavých animací:

1. Ukazatel průběhu (Progress Bar)

Klasickým případem použití animací řízených posouváním je ukazatel průběhu, který se plní, jak uživatel posouvá stránku dolů. To poskytuje vizuální zpětnou vazbu o tom, jak daleko uživatel postoupil v obsahu.

/* CSS */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 5px;
  background-color: #4CAF50;
  width: 0%;
  animation: fillProgressBar linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 0%;
  animation-fill-mode: forwards;
}

@keyframes fillProgressBar {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <p>... zde je váš obsah ...</p>
</div>

Tento kód vytváří pevný ukazatel průběhu v horní části stránky. Animace fillProgressBar postupně zvyšuje šířku ukazatele průběhu z 0 % na 100 %, jak uživatel posouvá stránku dolů. Vlastnost animation-timeline: view() propojuje animaci s průběhem posouvání viewportu a animation-range váže posouvání na vizuální průběh.

2. Postupné zobrazení obrázku (Image Fade-In)

Můžete použít časové osy posouvání k vytvoření jemného efektu postupného zobrazení obrázků, když vstupují do viewportu, což zvyšuje vizuální přitažlivost vašeho obsahu.

/* CSS */
.fade-in-image {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HTML */
<img src="image.jpg" class="fade-in-image" alt="Obrázek">

Tento kód zpočátku skryje obrázek a posune jej mírně pod jeho konečnou pozici. Jak se obrázek posouvá do zobrazení, animace fadeIn postupně zvyšuje jeho průhlednost a přesouvá ho na původní pozici, čímž vytváří plynulý efekt postupného zobrazení. Vlastnost animation-range specifikuje, že animace začíná, když horní okraj obrázku je na 25 % viewportu, a končí, když je spodní okraj na 75 % viewportu.

3. Přilepené prvky (Sticky Elements)

Dosáhněte "přilepených" efektů – kde se prvky při posouvání drží v horní části viewportu – ale s vylepšenou kontrolou a přechody. Představte si navigační lištu, která se plynule mění na zúženou verzi, jak uživatel posouvá stránku dolů.

/*CSS*/
.sticky-container {
  height: 200px; /* Upravte podle potřeby */
  position: relative;
}

.sticky-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
  animation: stickyAnimation linear;
  animation-timeline: view();
  animation-range: entry 0% cover 20%; /* Upravte rozsah podle potřeby */
  animation-fill-mode: both;
  z-index: 10;
}

@keyframes stickyAnimation {
  0% {
    position: absolute;
    top: 0;
  }
  100% {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ddd; /* Změna barvy pro indikaci přilepení */
  }
}

/* HTML */
<div class="sticky-container">
  <div class="sticky-element">Můj přilepený prvek</div>
</div>

V tomto příkladu prvek přechází z position: absolute na position: fixed, jakmile vstoupí do horních 20 % viewportu, čímž vytváří plynulý "přilepený" efekt. Upravte animation-range a CSS vlastnosti v rámci klíčových snímků pro přizpůsobení chování.

4. Efekt paralaxního posouvání

Vytvořte efekt paralaxního posouvání, kde se různé vrstvy obsahu pohybují různou rychlostí, jak uživatel posouvá stránku, což přidává hloubku a vizuální zajímavost.

/* CSS */
.parallax-container {
  position: relative;
  height: 500px; /* Upravte podle potřeby */
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.parallax-layer--bg {
  background-image: url("background.jpg");
  animation: parallaxBg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

.parallax-layer--fg {
 background-image: url("foreground.png");
  animation: parallaxFg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

@keyframes parallaxBg {
 to {
    transform: translateY(50px); /* Upravte pro rychlost paralaxy */
 }
}

@keyframes parallaxFg {
 to {
   transform: translateY(100px); /* Upravte pro rychlost paralaxy */
 }
}

/* HTML */
<div class="parallax-container">
  <div class="parallax-layer parallax-layer--bg"></div>
  <div class="parallax-layer parallax-layer--fg"></div>
</div>

Tento příklad vytváří dvě vrstvy s různými obrázky na pozadí. Animace parallaxBg a parallaxFg posouvají vrstvy různými rychlostmi, čímž vytvářejí paralaxní efekt. Upravte hodnoty translateY v klíčových snímcích pro řízení rychlosti každé vrstvy.

5. Animace odhalení textu

Odhalujte text znak po znaku, jakmile uživatel posune stránku za určitý bod, čímž přitáhnete pozornost a vylepšíte vyprávěcí aspekt obsahu.

/* CSS */
.text-reveal-container {
  position: relative;
  overflow: hidden;
}

.text-reveal {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: textRevealAnimation steps(1) forwards;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
  width: 0;
}

@keyframes textRevealAnimation {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="text-reveal-container">
  <span class="text-reveal">Tento text se odhalí při posouvání.</span>
</div>

Tento příklad využívá časovací funkci steps(1) k odhalení textu znak po znaku. width: 0 zpočátku text skryje a animace textRevealAnimation postupně zvyšuje šířku, aby odhalila celý text. Upravte animation-range pro řízení, kdy animace odhalení textu začne a skončí.

Kompatibilita s prohlížeči a polyfilly

CSS časové osy posouvání jsou relativně novou technologií a podpora v prohlížečích se stále vyvíjí. Koncem roku 2023 nabízejí hlavní prohlížeče jako Chrome a Edge dobrou podporu. Firefox a Safari na implementaci této funkce aktivně pracují. Před implementací časových os posouvání v produkčním prostředí je nezbytné zkontrolovat aktuální kompatibilitu s prohlížeči. Pro ověření stavu podpory můžete použít zdroje jako Can I use.

Pro prohlížeče, které nativně nepodporují časové osy posouvání, můžete použít polyfilly k poskytnutí podobné funkcionality. Polyfill je kousek JavaScriptového kódu, který implementuje chybějící funkci pomocí JavaScriptu. Pro CSS časové osy posouvání je k dispozici několik polyfillů, které vám umožní tuto funkci používat i ve starších prohlížečích.

Zohlednění přístupnosti

Zatímco animace řízené posouváním mohou vylepšit uživatelský zážitek, je klíčové zvážit přístupnost, aby vaše webové stránky byly použitelné pro všechny, včetně uživatelů se zdravotním postižením.

Osvědčené postupy a tipy

Zde jsou některé osvědčené postupy a tipy pro efektivní používání CSS časových os posouvání:

Globální aspekty návrhu animací

Při navrhování animací pro globální publikum mějte na paměti tyto body:

Závěr

CSS časové osy posouvání nabízejí výkonný a efektivní způsob vytváření poutavých a interaktivních webových animací. Propojením průběhu animace s pozicí posouvání můžete vytvářet zážitky, které jsou dynamičtější, responzivnější a uživatelsky přívětivější. Ačkoli se podpora v prohlížečích stále vyvíjí, výhody používání CSS časových os posouvání – zlepšený výkon, deklarativní přístup a vylepšený uživatelský zážitek – z nich činí cenný nástroj pro moderní webové vývojáře. Při experimentování s časovými osami posouvání nezapomeňte upřednostňovat přístupnost a zvažovat globální kontext vašeho publika, abyste vytvořili skutečně inkluzivní a poutavé webové zážitky.

Přijměte tuto vzrušující novou technologii a odemkněte svět kreativních možností pro vaše webové projekty. Budoucnost webových animací je tady a je řízena posouváním!